import { StyleSheet, Switch, Text, View } from "react-native";
import { AntDesign, Entypo } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import SudokuBoard from "./components/SudokuBoard";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function Setting(){

    const [isSoundOn,setIsSoundOn]=useState(true);
    const [isShakeOn,setIsShakeOn]=useState(true);
    const [isShow,setIsShow]=useState(true);
    const [isAuto,setIsAuto]=useState(true);

    useEffect(()=>{
      const loadSettings=async()=>{
        try{
          const soundSetting=await AsyncStorage.getItem("isSoundOn");
          const shakeSetting=await AsyncStorage.getItem("isShakeOn");
          const showSetting=await AsyncStorage.getItem("isShow");
          const autoSetting=await AsyncStorage.getItem("isAuto");
          if(soundSetting!==null){
            setIsSoundOn(JSON.parse(soundSetting));
          }
          if(shakeSetting!==null){
            setIsShakeOn(JSON.parse(shakeSetting));
          }
          if(showSetting!==null){
            setIsShow(JSON.parse(showSetting));
          }
          if(autoSetting!==null){
            setIsAuto(JSON.parse(autoSetting));
          }
        }catch(error){
          console.log("Error loading settings:",error);
        }
      };
      loadSettings();
    },[]);

    const saveSeeting=async(KeyboardEvent,value)=>{
      try{
        await AsyncStorage.setItem(KeyboardEvent,JSON.stringify(value));
      }catch(error){
        console.log(`Error saving ${key}:`, error);
      }
    }
    const toggleSoundSwitch=async()=>{
      const newState=!isSoundOn;
      setIsSoundOn(newState);
      await saveSeeting("isSoundOn",newState);
    }
    const toggleShakeSwitch=async()=>{
      const newState=!isShakeOn;
      setIsShakeOn(newState);
      await saveSeeting("isShakeOn",newState);
    }

    const toggleShowSwitch=async()=>{
      const newState=!isShow;
      setIsShow(newState);
      await saveSeeting("isShow",newState);
    }
    const toggleAutoSwitch=async()=>{
      const newState=!isAuto;
      setIsAuto(newState);
      await saveSeeting("isAuto",newState);
    }

  
    return (
        <View style={styles.container}>
          <View style={styles.item}>
            <View style={styles.iconText}>
              <Entypo name="sound" size={25} color="#007ACC"/>
              <Text style={styles.title}>音效</Text>
            </View>
            <Switch
              value={isSoundOn}
              onValueChange={toggleSoundSwitch}
              thumbColor="#FFFFFF" trackColor={{ false: "#ccc", true: "#00bcd4" }}
            />
          </View>
          <View style={styles.item}>
            <View style={styles.iconText}>
              <AntDesign name="shake" size={25} color="#007ACC"/>
              <Text style={styles.title}>震动</Text>
            </View>
            <Switch
              value={isShakeOn}
              onValueChange={toggleShakeSwitch}
              thumbColor="#FFFFFF" trackColor={{ false: "#ccc", true: "#00bcd4" }}
            />
          </View>
    
          <View style={styles.item}>
            <View style={styles.iconText}>
              <AntDesign name="eye" size={25} color="#007ACC"/>
              <View style={styles.textGroup}>
                <Text style={styles.title}>突出显示区域</Text>
                <Text style={styles.description}>
                  突出显示所选格子所在的小九宫、行和列
                </Text>
              </View>
            </View>
            <Switch
              value={isShow}
              onValueChange={toggleShowSwitch}
              thumbColor="#FFFFFF" trackColor={{ false: "#ccc", true: "#00bcd4" }}
            />
          </View>

          <View style={styles.item}>
            <View style={styles.iconText}>
              <Entypo name="circle-with-cross" size={25} color="#007ACC"/>
              <View style={styles.textGroup}>
                <Text style={styles.title}>自动删除笔记</Text>
                <Text style={styles.description}>
                  填入数字时，自动将其所在行、列、宫的所有笔记中删除
                </Text>
              </View>
            </View>
            <Switch
              value={isAuto}
              onValueChange={toggleAutoSwitch}
              thumbColor="#FFFFFF" trackColor={{ false: "#ccc", true: "#00bcd4" }}
            />
          </View>
          
        </View>
      )
    
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#f5f5f5",
      padding: 20,
    },
    item: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "flex-start", 
      borderBottomWidth: 1,
      borderColor: "#e0e0e0",
      paddingVertical: 15,
      marginBottom: 10, 
    },
    iconText: {
      flexDirection: "row",
      alignItems: "center",
      flex: 1,
    },
    textGroup: {
      marginLeft: 10,
      flex: 1,
    },
    title: {
      fontSize: 16,
      fontWeight: "bold",
      color: "#333",
      marginLeft: 10,
    },
    description: {
      fontSize: 14,
      color: "#888",
      marginTop: 5,
      flexWrap: "wrap", 
      width: '80%', 
    },
  });